<template>
	<view class="get-phone-page">
		<view class="login-title">
			<view class="" style="margin-bottom: 20rpx;font-size: 60rpx;">
				欢迎登录
			</view>
			<view class="" style="margin-bottom: 20rpx;">
				{{cinemaName}}
			</view>
			<view class="tips">
				支持手机号一键快捷登录
			</view>
		</view>
		<view style="display: flex;align-items: center;	margin-bottom: 60rpx;">
			<checkbox-group @change="change">
				<label>
					<checkbox :value="isAgree" /><text class="checkBtn">您已阅读并同意</text>
				</label>
			</checkbox-group>
			<text class="pop-tip" @click="showAgreement=true">《用户服务协议》</text><text class="pop-tip"
				@click="showPolicy=true">《隐私政策》</text>
		</view>
		<button class='get-btn' :disabled="isAgree" @click="showPhoneModal = true">
			手机号登录
		</button>
		<button class='get-btn' style="margin-top: 40rpx;" :disabled="isAgree" open-type="getPhoneNumber"
			@getphonenumber="PhoneNumber">
			手机号快捷登录
		</button>
		<van-popup :show="showPolicy" @click-overlay="showPolicy=false">
			<view class="show-content">
				<view style="text-align: center;">
					<text>{{cinemaName}}小程序隐私保护指引</text>
				</view>
				<view class="content">
					<text>
						"{{cinemaName}}"（以下简称“开发者”）为处理您的个人信息而制定。开发者处理的信息根据法律规定，开发者仅处理实现小程序功能所必要的信息。为了展示用户基本信息，开发者将在获取您的明示同意后，收集您的微信昵称、头像。为了选座位、购票、会员卡注册、会员卡绑定，开发者将在获取您的明示同意后，收集您的手机号。

						开发者对信息的存储
						开发者承诺，除法律法规另有规定外，开发者对您的信息的保存期限应当为实现处理目的所必要的最短时间。

						信息的使用规则
						开发者将会在本指引所明示的用途内使用收集的信息
					</text>
				</view>
			</view>
		</van-popup>
		<privacy @close="close"></privacy>
		<van-popup :show="showAgreement" @click-overlay="showAgreement=false">
			<view class="show-content">
				<view style="text-align: center;">
					<text>{{cinemaName}}用户服务协议</text>
				</view>
				<view class="content" style="text-indent: unset;">
					<text>
						1.1本条款是用户（以下简称“您”）与{{cinemaName}}之间关于用户使用小程序服务所订立的协议。“用户”是指注册、登录、使用微信小程序的个人或组织；“其他用户”是指包括其他微信小程序用户、微信公众账号用户和微信用户等除您本人外与小程序服务相关的用户。
						1.2本服务是指{{cinemaName}}根据本协议向您提供的服务。我们会不断丰富您使用本服务的终端、形式等，如您已注册使用一种形式的服务，则可以以同一账号使用其他服务，本协议自动适用于您对所有版本的软件和服务的使用。
						1.3提供本服务的微信小程序的所有权和全部的使用权均归{{cinemaName}}所有，您开通后仅授权使用部分功能，具体以产品展示的为准。
						1.4小程序属于微信公众账号，在不与本协议冲突的情况下，您应遵守《微信公众平台服务协议》、《腾讯微信软件许可及服务协议》等关于微信公众账号的其他相关规定。
						1.5本协议内容包括本协议正文及所有我们已经发布或将来可能发布的隐私权政策、各项政策、规则、声明、通知、警示、提示、说明（以下统称为“隐私政策”）。隐私政策规则为本协议不可分割的补充部分，与本协议具有同等法律效力。如您使用{{cinemaName}}产品及服务，视为您同意上述补充部分。
					</text>
				</view>
			</view>
		</van-popup>
		<van-popup :show="showPhoneModal" @click-overlay="showPhoneModal=false">
			<view class="input-password">
				<van-field label="手机号" type="number" @change="changePhone" placeholder="请输入手机号" :border="false" />
				<van-field label="确认手机号" type="number" @change="changeConfirm" placeholder="请确认手机号" :border="false" />
				<view style="width: 100%;display: flex;justify-content: center;">
					<van-button round type="info" @click="phoneLogin"
						custom-style="margin:30rpx auto;width:60vw;height:60rpx;">
						确定</van-button>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import {
		getUserPhone,
		queryCinema,
		addUserInfo,
		getOpenID
	} from '../../common/http/api.js'
	import privacy from './privacy.vue'
	import {
		checkPhone
	} from '../../common/formCheck.js'
	export default {
		components: {
			privacy
		},
		data() {
			return {
				showAgreement: false,
				showPolicy: false,
				showPhoneModal: false,
				isAgree: true,
				cinemaName: '',
				sessionKey: '',
				openId: '',
				userPhone: '',
				confirmPhone: ''
			}
		},
		onLoad() {
			this.login();
			this.getName();
			uni.setNavigationBarTitle({
				title: this.$store.state.cinemaName
			})
		},
		methods: {
			changePhone(e) {
				this.userPhone = e.detail
			},
			changeConfirm(e) {
				this.confirmPhone = e.detail
			},
			phoneLogin() {
				if (!checkPhone(this.userPhone)) {
					uni.showToast({
						title: '请输入正确手机号',
						icon: "none"
					});
					return
				}
				if (this.confirmPhone != this.userPhone) {
					uni.showToast({
						title: '两次输入手机号不一致',
						icon: "none"
					})
					return
				}
				this.$userPhone = this.userPhone
				this.$store.commit("setPhone", this.userPhone)
				uni.setStorageSync('userPhone', this.userPhone)
				addUserInfo({
					openId: this.openId,
					phoneNo: this.userPhone
				}).then(_res => {
					if (_res.code == '000') {
						uni.navigateBack()
					} else {
						uni.showToast({
							title: "服务器异常，请重试",
							icon: "none"
						})
					}
					// 
				})

			},
			login() {
				this.openId = uni.getStorageSync("openId");
				this.sessionKey = this.$session_key;
				console.log(this.$session_key);
				// uni.login({
				// 	success: (res) => {
				// 		const {
				// 			code
				// 		} = res
				// 		getOpenID(code).then(res => {
				// 			const {
				// 				code,
				// 				data
				// 			} = res
				// 			if (code === "SUCCESS") {
				// 				this.sessionKey = data.session_key;
				// 				this.openId = data.openid
				// 			}

				// 		})
				// 	}
				// })
			},
			change(e) {
				const {
					detail: {
						value
					}
				} = e
				if (value.length && value[0] == 'true') {
					this.isAgree = false
					console.log(this.isAgree);
				} else {
					this.isAgree = true
				}
			},
			PhoneNumber(e) {
				const {
					detail: {
						errMsg,
						iv,
						encryptedData
					}
				} = e
				if (errMsg === "getPhoneNumber:ok") {
					const data = {
						iv,
						encrypteData: encryptedData,
						sessionKey: this.sessionKey
					}
					getUserPhone(data).then(res => {
						const {
							code,
							data,
							msg
						} = res
						const _data = JSON.parse(data)
						if (code === "SUCCESS") {
							this.$userPhone = _data.phoneNumber
							this.$store.commit("setPhone", _data.phoneNumber)
							uni.setStorageSync('userPhone', _data.phoneNumber)
							addUserInfo({
								openId: this.openId,
								phoneNo: _data.phoneNumber
							}).then(_res => {
								if (_res.code == '000') {
									uni.navigateBack()
								} else {
									uni.showToast({
										title: "服务器异常，请重试",
										icon: "none"
									})
								}
								// 
							})



						} else {
							uni.showToast({
								title: msg,
								icon: "none"
							})
						}
					})
				}
			},

			getName() {
				queryCinema().then(res => {
					const {
						data: {
							CinemaName
						}
					} = res
					this.cinemaName = CinemaName
				})
			},
			close() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			}
		}
	}
</script>

<style lang="scss">
	.input-password {
		width: 80vw;
		padding: 30rpx;
	}

	.login-title {
		height: 400rpx;
		width: 100vw;
		left: 0;
		top: 0;
		position: absolute;
		background: linear-gradient(to bottom, #FB5868 0%, #fff 100%);
		padding: 40rpx;
		box-sizing: border-box;
		color: #fff;
		font-size: 40rpx;
		font-weight: bold;

		.tips {
			font-size: 26rpx;
			font-weight: normal;
		}
	}

	.get-phone-page {
		width: 100vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 40vh;
		position: relative;

		.checkBtn {
			font-size: 24rpx;
			color: #999;


		}

		.pop-tip {
			font-size: 24rpx;
			color: #999;
			color: royalblue;
			text-decoration: underline;
			margin-right: 10rpx;

		}

		.get-btn {
			border: unset;
			width: 60vw;
			height: 100rpx;
			margin: 30rpx auto 0 auto;
			line-height: 100rpx;
			background-color: #FB5868;
			font-size: 30rpx;
			color: #fff;
		}

		.show-content {
			padding: 30rpx;
			width: 85vw;
			border-radius: 10rpx;

			.content {
				font-size: 26rpx;
				color: #999;
				text-indent: 52rpx;
			}
		}
	}
</style>